<template>
  <div class="container" ref="box">
    <div class="form-container">
      <div class="camp-form">
        <div class="span-second">
          <span>模式:</span>
          <el-select v-model="camp_value" placeholder="模式">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="medium">
            </el-option>
          </el-select>
        </div>
        <div class="span-second">
          <span>间隔:</span>
          <el-input-number 
            v-model="interv_num"
            controls-position="right"
            size="medium"
            :step="100"
            :min="1"
            :max="10000">
          </el-input-number>
        </div>
        <div class="span-second">
          <span>模糊度:</span>
          <el-input-number 
            v-model="blur_num" 
            controls-position="right"
            size="medium"
            :precision="2"
            :step="0.1" 
            :min="0" 
            :max="1">
          </el-input-number>
        </div>
        <el-button type="success" @click="changeData()" size="medium">提交</el-button>
      </div>
    </div>
    <div class="table-container">
      <line-chart class="line-chart" :key="chart_key + '1'" title="飞行直方图" :x_data="xData" :seriesData="series_data" :method="switchMethod()"></line-chart>
      <thin-chart class="line-chart" :key="chart_key + '2'" title="飞行直方图" :x_data="xData" :seriesData="series_data" :method="switchMethod()"></thin-chart>
    </div>
  </div>
</template>

<script>
// import store from '../store/index'
import router from '../../router/index'
import LineChart from './lineChart'
import ThinChart from './thinChart'
import { test, updateCAMP, testFile, fileExist} from '../../api/modules/login'
//import { mapMutations } from 'vuex'
export default {
  components: {
    LineChart,
    ThinChart
  },
  props: {
    width: {
      type: String,
      default: '90%'
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  data () {
    return {
      questionData: {},
      options: [{
        value: "0",
        label: "FC"
      },{
        value: "1",
        label: "FH"
      },{
        value: "2",
        label: "MO"
      }],
      camp_value: "0",
      interv_num: 1000,
      blur_num: 0.10,
      userId: "",
      chart: null,

      xData: [],
      series_data: [],
      chart_key: 1
    }
  },
  // 1.监听菜单收缩变化 图表自适应 2.监听数据变化 初始化图表
  watch: {
    // collapse () {
    //   this.resizeHandler()
    // },
  },
  mounted () {
    // this.resizeHandler = debounce(() => {
    //   if (this.chart) {
    //     this.chart.resize()
    //   }
    // }, 100)
    // this.initResizeEvent()
    
    // userId的检测
    if(! window.localStorage.getItem("userId")){  
      let id = parseInt(new Date().getTime() / 1000).toString()
      window.localStorage.setItem("userId", id)
      this.userId = id
    }
    else{
      this.userId = window.localStorage.getItem("userId")
    }
    this.checkFile()
  },
  // beforeDestroy () {
  //   this.destroyResizeEvent()
  //   if (!this.chart) {
  //     return
  //   }
  //   this.chart.dispose()
  //   this.chart = null
  // },
  methods: {
    testJudge(num1, num2){
      if(num1 + num2 > 10) {
        return true;
      }
      else {
        return false;
      }
    },

    checkFile(){
      fileExist(this.userId).then((res) => {
        if (res.status === 200) {
          if(res.data.errCode == 0){
            this.$store.commit("setFileOk", true)
          }
          else{
            console.log("error")
            this.$store.commit("setFileOk", false)
            let third = {
              path: '/third'
            }
            router.push(third)
          }
        } else {
          console.log("error ok")
        }
      })
    },
    // 监听浏览器窗口变化 图表自适应
    // initResizeEvent () {
    //   window.addEventListener('resize', this.resizeHandler)
    // },
    // destroyResizeEvent () {
    //   window.removeEventListener('resize', this.resizeHandler)
    // },
    login2: function (params) {
      // const fileReader = new FileReader()
      // fileReader.onload = (ev) => {
      //    try {
      //       const data = ev.target.result
      //       const workbook = XLSX.read(data, {
      //       type: 'binary'
      //     }) // 读取数据
      //     const wsname = workbook.SheetNames[0] // 取第一张表
      //     console.log(wsname)
      //     const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
      //     // const ws1 = XLSX.utils.sheet_to_slk(workbook.Sheets[wsname]) // 输出表格对应位置是什么值
      //     // const ws2 = XLSX.utils.sheet_to_html(workbook.Sheets[wsname]) // 生成HTML输出
      //     // const ws3 = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]) // 生成分隔符分隔值输出
      //     // const ws4 = XLSX.utils.sheet_to_formulae(workbook.Sheets[wsname]) // 生成公式列表（具有值回退）
      //     // const ws5 = XLSX.utils.sheet_to_txt(workbook.Sheets[wsname]) // 生成UTF16格式的文本

      //     let outputs = [] // 清空接收数据
      //     console.log(ws)
      //     for (let i = 0; i < ws.length; i++) {
      //       let sheetData = ws[i] // 对数据自行操作
      //       outputs.push(sheetData)
      //     }
          
      //     this.$refs.upload.value = ''
      //    } catch (e) {
      //     console.log(e)
      //     return false
      //   }
      // }
      // fileReader.readAsBinaryString(fileData)
    },
    changeData() {
      //获取参数
      let bodyjson = {"method": parseInt(this.camp_value), "interval": this.interv_num, "blur": this.blur_num}
      console.log(bodyjson)

      //发送请求并更新数据
      updateCAMP(bodyjson, this.userId).then((res) => {
        console.log(res)
        if (res.status === 200) {
          this.questionData.data = res.data.data
          this.xData = this.questionData.data.map( item => {
            if(item.count == 0){
              return ''
            }
            else{
              return item.interv.toString()
            }
          })

          this.series_data = this.questionData.data.map( item => {
              return item.count
          })

          this.chart_key ++;
        } else {
          this.$message.error("error");
        }
      })
    },
    switchMethod(){
      switch(this.camp_value){
          case "0": return "FC"
          case "1": return "FH"
          case "2": return "MO"
          default: return "FC"
        }
    }
  }
}
</script>

<style scoped lang='scss'>
.table-container{
  padding-top: 50px;
  margin-left: 260px;
}
.form-container{
  position: absolute;
  width: 240px;
  height: 150%;
  border-right: gray 1px solid;
}
.camp-form{
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  padding-left: 30px;
  padding-top: 50px;
}
.camp-form .el-select{
  width: 100px;
  margin-left: 0px;
}
.camp-form span{
  margin-top: 20px;
  margin-bottom: 3px;
}
.camp-form .el-input-number{
  width: 120px;
  height: 36px;
  margin-left: 0px;
}
.camp-form .el-button{
  width: 120px;
  margin-top: 50px;
  margin-left: 30px;
}
.span-second{
  margin-bottom: 50px;
}
.span-second span{
  display: inline-block;
  width: 50px;
  font-size: 13px;
}
</style>
